<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/index.css" />
		<link rel="stylesheet" type="text/css" href="../../css/person.css"/>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/vant.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/ajax.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/Lazyload.js" type="text/javascript" charset="utf-8"></script>
		<script src="html5plus://ready"></script>
		<style type="text/css">
			.xs {
				border: 2px solid red;
				margin-left: 5px;
				border-bottom: 0px;
				border-top: 0px;
				border-right: 0px;
				padding-top: 5px;
				margin-top: 5px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<van-row>
				<van-nav-bar id="header" title="生成订单"  left-arrow  @click-left="back"></van-nav-bar>
			</van-row>
			<van-row style="background: white;">
				<div class="xs">商品清单</div>
				<van-col span="24" v-if="show">
					<div style="border-radius: 500px;width: 100%;height: 100%;">
						<van-card
						v-for="(item,index) in goods"
						:num="num"
						:price="item.RealPrice"
						v-bind:title="item.Name"
						>
						<img src="item.GoodsImageUrl[0].src" style="width: 100%;height: 100%;" onerror="javascript:this.src='../../img/insert.png';" slot="thumb"/>
						</van-card>
					</div>
				</van-col>
				<van-col span="24" v-else>
					<div style="border-radius: 500px;width: 100%;height: 100%;">
						<van-card
						v-for="(item,index) in goods"
						:num="item.num"
						:price="item.RealPrice"
						v-bind:title="item.Name"
						>
						<img src="item.GoodsImageUrl[0].src" style="width: 100%;height: 100%;" onerror="javascript:this.src='../../img/insert.png';" slot="thumb"/>
						</van-card>
					</div>
				</van-col>
			</van-row>
			<div style="background: white;margin-top: 2%;">
				<div class="xs">收货地址</div>
				<div style="padding: 2%;">
						<van-cell-group>
							<van-cell-group>
								<van-field label="收件人" :value="name"></van-field>
								<van-field label="联系电话" :value="phone"></van-field>
								<van-field label="详细地址" :value="address"></van-field>
							</van-cell-group>
						</van-cell-group>
					<van-cell value="其他收货地址" style="padding-left: 30%; color: #B7BCC3;" @click="skipAddress">
					</van-cell>
				</div>
			</div>
			<div style="background: white;margin-top: 2%;margin-bottom: 70px;">
					<div class="xs">支付方式</div>
					<van-radio-group v-model="radio" v-model="selcet">
						<van-cell-group>
							<van-cell title="支付宝" clickable @click="radio = 'alpay'" @click="selcet='1'">
								<img src="../../img/pay/pay_icon_zfb.png" slot="icon" style="width: 25px; height: 25px;" />
								<van-radio name="alipay"></van-radio>
							</van-cell>
							<van-cell title="微信支付" disabled clickable  @click="radio = 'wxpay'" @click="selcet='1'">
								<img src="../../img/pay/pay_icon_wx.png" slot="icon" style="width: 25px; height: 25px;" />
								<van-radio name="wxpay" disabled></van-radio>
							</van-cell>
						</van-cell-group>
					</van-radio-group>
				</div>
			<van-tabbar style="height: 10%;">
				<van-tabbar-item><span>合计:</span><span style="color: red; font-size: 20px;" v-text="totalMoney"></span><span>元</span></van-tabbar-item>
				<van-tabbar-item style="background-color: #FF4444;" @click="pay">
					<span style="color: white;">去支付</span>
				</van-tabbar-item>
			</van-tabbar>
		</div>
		<script type="text/javascript">
			Vue.use(VueLazyload, {
				error: "../../img/insert.jpg"
			});
			var vm = new Vue({
				el: "#app",
				data: {
					radio: "alipay",
					totalMoney:0,
					goods:[],
					key:"",
					name:"",
					phone:"",
					address:"",
					addressId:"",
					orderId:"",
					show:true,
					num:1,
				},
				mounted(){
					var _this=this;
					_this.$toast.loading({
						duration: 0,       // 持续展示 toast
						forbidClick: true, // 禁用背景点击
						loadingType: 'spinner',
						mask:true,
						message: '信息同步中,请稍后...'
					});
					setTimeout(function(){
						_this.$toast.clear();
					},1000);
					var wv = plus.webview.currentWebview();
					plus.key.addEventListener("backbutton",function(){  
						var wv = plus.webview.currentWebview();
						plus.webview.close(wv.id);
					}); 
					var wv=plus.webview.currentWebview();
					_this.num=wv.num;
					if(plus.webview.currentWebview().pid){
						ajax({
							url:"http://dsapi.ysd3g.com/api/IndexGoodsData",
							type:"post",
							dataType:"JSONP",
							data:{
								p:1
							},
							success:function(res){
								var id=plus.webview.currentWebview().pid;
								for(var i=0;i<res.Data.length;i++){
									if(res.Data[i].Id==id){
										_this.goods.push(res.Data[i]);
									};
								};
								_this.show=true;
							}
						});
					}else{
						_this.goods=plus.webview.currentWebview().pids;
						_this.show=false;
					};
					var _this = this;
					_this.key = localStorage.getItem("keys");
					ajax({
						url:"http://dsapi.ysd3g.com/api/MyDefaultAddress",
						type:"post",
						dataType:"JSONP",
						data:{
							key:_this.key
						},
						success:function(res){
							// console.log(res);
							_this.addressId=res.id;
							_this.name=res.name;
							_this.phone=res.tel;
							_this.address=res.address;
							}
							// console.log(_this.addressId);
					});
					if(localStorage.getItem("addressId")!= undefined){
						ajax({
							url:"http://dsapi.ysd3g.com/API/MyShippingAddressList",
							type:"post",
							dataType:"JSONP",
							data:{
								key:_this.key
							},
							success:function(res){
								console.log(res.Data);
								for(var i=0;i<res.Data.length;i++){
									if(res.Data[i].id==localStorage.getItem("addressId")){
										_this.name=res.Data[i].name;
										_this.phone=res.Data[i].tel;
										_this.address=res.Data[i].address;
									}
								};
								localStorage.removeItem("addressId")
							}
						})
					}
				},
				methods: {
					back:function(){
						var wv =plus.webview.currentWebview();
						plus.webview.close(wv.id);
					},
					skipAddress() {
						plus.webview.create("./Myaddress.html", "Myaddress", {}, {
							isShow_address: true,
							Id:"2",
							isShow: this.isShow
						}).show();
					},
					pay() {//支付第一步 生成订单
						var _this=this;
						if(_this.addressId==null){
							_this.$toast.fail("请选择收货地址");
						}
						else{
							var shoppingCartJsonStr = [];
							if(plus.webview.currentWebview().pids){
								var goods=plus.webview.currentWebview().pids;
								for(var i=0;i<goods.length;i++){
									var arr={goodsId:goods[i].Id,buyCount:goods[i].num};
									shoppingCartJsonStr.push(arr);
								};
							}else{
								shoppingCartJsonStr = [{
									goodsId: plus.webview.currentWebview().pid,
									buyCount: _this.num
								}]
							};
							var toast=_this.$toast.loading({
								duration: 0,       // 持续展示 toast
								forbidClick: true, // 禁用背景点击
								loadingType: 'spinner',	
								mask:true,
								message: '生成订单中'
							});
							ajax({
								url: "http://dsapi.ysd3g.com/API/GeneratingOrder",
								dataType: "jsonp",
								data: {
									key:_this.key,
									shoppingCartJsonStr: JSON.stringify(shoppingCartJsonStr)
								},
								success(res) {
									if(res.Error) {
										_this.$toast.fail(res.Msg);
									} else {
										setTimeout(function(){
											_this.$toast.success("订单生成成功");
											_this.orderId = res.OrderId;
											localStorage.setItem(res.orderId, _this.addressId);
											if(!_this.isShow) {
												var phone = localStorage.getItem("phone");
												if(!plus.webview.currentWebview().pids){//如果是从购物车发起支付,则清除购物车
													var shopCart = JSON.parse(localStorage.getItem("phone"));
													for(var j = 0; j < shopCart.length; j++) {
														for(var k = 0; k < _this.order.length; k++) {
															if(_this.order[k].Id = shopCart[j].goodsId) {
																shopCart.splice(j, 1);
															}
														}
													}
													var sc = JSON.stringify(shopCart)
													localStorage.setItem("phone", sc);
													plus.webview.getWebviewById("Shopping").reload(false);
												}
											}
											setTimeout(function(){
												_this.$toast.clear();
												var toast=_this.$toast.loading({
													duration: 0,       // 持续展示 toast
													forbidClick: true, // 禁用背景点击
													mask:true,
													loadingType: 'spinner',
													message: '正在调起支付宝'
												});
												setTimeout(function(){
													ajax({
														url:"http://dsapi.ysd3g.com/api/OrderPay",
														dataType:"JSONP",
														data:{
															key:_this.key,
															oId:_this.orderId,
															payType:"1",
															addressIdx:_this.addressId,
															money:_this.totalMoney
														},
														success:function(res){
															_this.$toast.clear();
															if(res.Error){
																_this.$toast.fail(res.Msg);
															}
															else{
																var payment = "";
																plus.payment.getChannels(function(s) {
																	plus.payment.request(s[0], res.strJson, function() {
																		vm.$toast.alert("支付操作成功！");
																		localStorage.removeItem(orderId);
																		setTimeout(function(){
																			plus.webview.create("pay-success.html","pay_success",{},{orderId:_this.orderId});
																			plus.webview.show("pay_success");
																			plus.webview.close(plus.webview.currentWebview());
																		},500)
																	}, function(e) {
																		setTimeout(function(){
																			_this.$toast.fail(e.message);
																		},1000)
																	})
																}, function(e) {
																	setTimeout(function(){
																		_this.$toast.fail(e.message);
																	},1000)
																})
															}
														}
													});
												},1000)//调起支付宝过程
											},1000)//支付等待过程
										},2000)//订单生成等待过程
									}
								}//生成订单结束
							});//支付结束
						}
						
					},
				},
			})
		</script>
	</body>
</html>
